import 'dart:developer';

import 'package:flutter/material.dart';

class SampleDrawerWidget extends StatelessWidget {
  const SampleDrawerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return _SampleDrawerWidget();
  }
}

class _SampleDrawerWidget extends StatefulWidget {
  const _SampleDrawerWidget({Key? key}) : super(key: key);

  @override
  __SampleDrawerWidgetState createState() => __SampleDrawerWidgetState();
}

class __SampleDrawerWidgetState extends State<_SampleDrawerWidget> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Drawer示例"),
          leading: Builder(
            builder: (context) {
              return IconButton(
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                  icon: Icon(Icons.menu));
            },
          ),
        ),
        body: Column(
          children: [
            Container(
              width: double.infinity,
              child: RaisedButton(
                onPressed: () {
                  log("弹出菜单"); // 不要直接使用
                  Scaffold.of(context).openDrawer();
                },
                child: Text("弹出侧滑菜-1-打不开"),
              ),
            ),
            Builder(builder: (context) {
              // 只有包裹一层才可以打开
              return Container(
                width: double.infinity,
                child: RaisedButton(
                  onPressed: () {
                    log("弹出菜单"); // 不要直接使用
                    Scaffold.of(context).openDrawer();
                  },
                  child: Text("弹出侧滑菜-2"),
                ),
              );
            }),
            Container(
              margin: EdgeInsets.fromLTRB(0, 20, 0, 20),
              child: InkWell(
                onTap: () => Scaffold.of(context).openDrawer(),
                child: Container(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20.0),
                    child: Icon(Icons.add),
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(0, 25, 0, 25),
              child: Builder(builder: (context) {
                return InkWell(
                  // 只有包裹一层才可以打开
                  onTap: () => Scaffold.of(context).openDrawer(),
                  child: Container(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(20.0),
                      child: Icon(Icons.add),
                    ),
                  ),
                );
              }),
            ),
            Container(
              width: double.infinity,
              child: RaisedButton(
                onPressed: () {
                  log("隐藏菜单");
                  Navigator.of(context).pop();
                },
                child: Text("隐藏菜单"),
              ),
            )
          ],
        ),
        drawer: Drawer(
          child: buildDrawerContent(),
        ),
      ),
    );
  }

  buildDrawerContent() {
    var list = List.of(["湖北", "湖南", "天津", "上海", "安徽", "河南", "河北", "陕西", "陕北", "四川", "江西", "福建", "广东", "广西"]);
    return ListView.separated(
        itemBuilder: (context, index) {
          // 头部
          if (index == 0) {
            return Container(
              height: 150,
              width: double.infinity,
              color: Colors.red,
              child: Image.asset(
                "assets/images/header.jpeg",
                fit: BoxFit.fill,
              ),
              // child: Image.network(
              //     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-07-20%2F5f1554f6d025b.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631545313&t=6f909b1770a8795a6e1d48822fa2e000"),
            );
          } else
            return ListTile(
              title: Center(
                child: Text(list[index - 1]), // 这里要-1，否则 会报错
              ),
            );
        },
        separatorBuilder: (context, index) {
          if (index == 0) {
            return Container();
          }
          return Divider();
        },
        itemCount: list.length + 1); // 这里+1，实现头部
  }
}
